<template>
  <section>
    <el-radio-group v-model="editName" size="mini">
      <el-radio-button
        v-for="(name, index) in names"
        :key="index"
        :label="name"
        @click.native="handleEdit(name)"
      ></el-radio-button>
    </el-radio-group>
    <el-input type="textarea" :value="source[editName]" @input="handeInput" />
  </section>
</template>

<script>
export default {
  name: "TransformEdit",
  props: {
    value: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      editName: null,
      adding: false,
      addedName: null,
      transform: {}
    };
  },
  computed: {
    names() {
      return Object.keys(this.value);
    },
    source() {
      return this.value || {};
    },
    merged() {
      return { ...this.source, ...this.transform };
    }
  },
  methods: {
    handleEdit(name) {
      this.editName = name;
    },
    handleAdded() {
      this.transform[this.addedName] = "";
      this.adding = false;
      this.$emit("input", this.merged);
    },
    handeInput(value) {
      this.$set(this.transform, this.editName, value);
      this.$emit("input", this.merged);
    }
  }
};
</script>
